<template>
    <div style="display:flex;align-items: center;flex-wrap:wrap;justify-content:center;" >   
    <div v-show="totals<0" >{{caution}}</div>
    <div style="width:3000px ;">
    <el-row type="flex" style="margin-top: 15px;">
       <el-col class="goods-show" :offset="3" :span="18">
            <el-card  v-for="pro in product.length>0 ? product : products" :key="pro.productId" :body-style="style">
  
                <img v-if="pro.productSku" :src=pro.productSku.skuImg class="image">
                <img v-else-if="pro.productImg" :src=pro.productImg.url class="image">
                <div style="padding: 14px;">
                    <span >{{pro.productName}}</span>
                    <div class="bottom clearfix">
                    <time class="time">{{pro.updateTime}}</time>
                    <el-button type="text" @click="particulars(pro.productId)" class="button">查看详情</el-button>
                    </div>
                </div>
            </el-card>  
        </el-col>
    </el-row>
    </div>
   
     <div  class="block">
        <el-pagination
            @size-change="goproductsize"
            @current-change="goproduct"
            :current-page="1"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total= "totalnum>0  ? totalnum : totals" >
        </el-pagination>
    </div>
    </div>
</template>

<script>
import http from '@/core/HttpRequest.js'
export default {
    props:[
        'product',
         'totalnum',
         'choosse',
         'pagesizesnum'
    ],

    data: () => ({
        products:[],
        totals:0,
        pagesize:10,
        // currentPage4:1,
        style: { padding: '0px', width: '205px' }
    }),
    mounted(){
        this.goproduct(1)
     

    },
    computed:{
        caution:function(){

            if(this.choosse>0){
                  this.$message({
                    dangerouslyUseHTMLString: true,
                    message:'<strong style="display: flex; justify-content: flex-start"  > <img style="width: 50px;height:50px;" src="http://116.62.132.74/RC.png"><span >目前暂无此类商品哦！！！下面所有商品请看官挑选</span></strong>'
                    });
            }
            return this.choosse
        },
        currentPage4:function(){
           
                if(this.totals>0||this.total>0){
                  return 1
                }
                return 1
            
        }
    },
    
    methods:{
        goproduct(page){
        if(this.totalnum>0){

            http.post('home/pic_pro',{
                        'page':page,
                        'categoryId':this.product[0].categoryId,
                        'pagesize':this.pagesize
                }).then(res=>{
                        let data=res.data.data
                        this.product=data.data 
                        this.totalnum=data.total         
                          
         })
        }else{
             http.get(`home/pro?page=${page}&limit=${this.pagesize}`).then(res=>{
                let data=res.data.data
                this.products=data.data 
                this.totals=data.total      
                 console.log(this.products);     
            })}
        },
        goproductsize(val){
            this.pagesize=val
            this.$emit('pagesize',val)

            http.get(`home/pro?page=1&limit=${val}`).then(res=>{
                        let data=res.data.data
                        this.products=data.data 
                        this.totals=data.total          
                    })
        },
        particulars(productId){
            this.$router.push({
                path:"/introduction",
                query:{
                    productId:productId
                }
            })
        },
       
    }
    
}
</script>

<style scoped>
    .el-card {
        height: 296px;
    }
    .goods-show {
        display: flex;
        gap: 10px;
        flex-flow: row wrap;
       
    }
    .image{
        height: 200px;
    }
</style>
